<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
	<div th:replace="~{commons/template::style}"></div>
	<title>课程管理</title>

</head>

<body>
<div th:replace="~{commons/template::head}"></div>

<div class="container-fluid">
	<div class="row">
		<div th:replace="~{commons/template::leftSide(active='course')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>课程管理</h2>

			<div class="table-responsive" th:fragment="detail">
				<table class="table table-striped table-sm">
					<form class="form-inline" th:action="@{/selectCourse}">
						<div class="row">
							<div class="col-md-4"></div>
							<div class="col-md-3">
								<div class="form-group">
									<input type="text" name="searchName" class="form-control" id="searchName" placeholder="课程名">
								</div>
							</div>
							<div class="col-md-2">
								<input type="submit" value="查询" class="btn btn-primary">
								<input type="button" id="insert" value="新增" class="btn btn-success">
							</div>
							<div class="col-md-3"></div>
						</div>
						<div class="row">
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<tr>
									<td align="center">课程ID</td>
									<td align="center">课程名</td>
									<td align="center">学分</td>
									<td align="center">开课学期</td>
									<td align="center">课程性质</td>
									<td align="center">考试性质</td>
									<td align="center">授课时数(学时)</td>
									<td align="center">实践时数(学时)</td>
									<td align="center">功能</td>
								</tr>
							</div>
							<div class="col-md-2"></div>
						</div>
						<div class="row">  <!--  内容  -->
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<tbody id="t1">
								<tr th:each="course:${pageInfo.getList()}">
									<td align="center" th:text="${course.getCourseId()}"></td>
									<td align="center" th:text="${course.getCourseName()}"></td>
									<td align="center" th:text="${course.getCourseScore()}"></td>
									<td align="center" th:text="${course.getCourseTerm()==1?'第一学期':'第二学期'}"></td>
									<td align="center" th:text="${course.getCourseType()}"></td>
									<td align="center" th:text="${course.getCourseTestType()}"></td>
									<td align="center" th:text="${course.getCourseHour()}"></td>
									<td align="center" th:text="${course.getCoursePractice()}"></td>
									<td align="center">
										<input type="button" class="btn btn-info" value="修改" id="update" th:name="${course.getCourseId()}">
										<input type="button" class="btn btn-outline-danger" value="删除" th:name="${course.getCourseId()}">
									</td>
								</tr>
								</tbody>
							</div>
							<div class="col-md-2"></div>
						</div>
						<div class="row">
							<div class="col-md-3"></div>
							<div class="col-md-1"><button id="prePage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getPrePage()}]])">上一页</button></div>
							<div class="col-md-1">当前第：<a name="pageNum" id="pageNum" th:text="${pageInfo.getPageNum()}"></a>页</div>
							<div class="col-md-1">总共：<a name="pages" id="pages" th:text="${pageInfo.getPages()}"></a>页</div>
							<div class="col-md-1">共：<a name="total" id="total" th:text="${pageInfo.getTotal()}"></a>条记录</div>
							<div class="col-md-1">
								<select name="pageSize" id="pageSize" onchange="changePage(1)" class="form-control-sm">
									<option value="5" th:selected="${pageInfo.getPageSize()==5}">每页5条</option>
									<option value="10" th:selected="${pageInfo.getPageSize()==10}">每页10条</option>
									<option value="15" th:selected="${pageInfo.getPageSize()==15}">每页15条</option>
									<option value="20" th:selected="${pageInfo.getPageSize()==20}">每页20条</option>
								</select>
							</div>
							<div class="col-md-1">
								<button id="nextPage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getNextPage()}]])">下一页</button>
							</div>
							<div class="col-md-3"></div>
						</div>
					</form>
				</table>
			</div>
		</main>
	</div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form id="form">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增/修改[课程]</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body" id="content">
					<tr>
						<td>
							<span id="cIdN">课程ID：</span>
							<input id="cId" type="text" placeholder="课程ID" name="courseId" readonly>
						</td>
					</tr>
					<tr>
						<td align="center">
							<span>课程名称：</span><input id="cName" type="text" placeholder="课程名" name="courseName">
						</td>
						<td align="center">
							<span>学分：</span><input id="score" type="text" placeholder="学分" name="score">
						</td>
					</tr>
					<tr><h6><span>开课学期</span></h6></tr>
					<tr>
						<td>
							<select class="form-control" id="term" name="term">
								<option value="">--请选择--</option>
								<option value="1">-第一学期-</option>
								<option value="2">-第二学期-</option>
							</select>
						</td>
					</tr>
					<tr><h6><span>课程性质</span></h6></tr>
					<tr>
						<td>
							<select class="form-control" id="courseType" name="courseType">
								<option value="">--请选择--</option>
								<option value="必修">--必修--</option>
								<option value="选修">--选修--</option>
							</select>
						</td>
					</tr>
					<tr><h6><span>考试性质</span></h6></tr>
					<tr>
						<td>
							<select class="form-control" id="testType" name="testType">
								<option value="">--请选择--</option>
								<option value="考试">--考试--</option>
								<option value="考查">--考查--</option>
							</select>
						</td>
					</tr>
					<tr>
						<td align="center">
							<mark>授课时数</mark><input id="courseHour" type="text" placeholder="授课时数" name="courseHour">
						</td>
						<td align="center">
							<mark>实践时数</mark><input id="practiceHour" type="text" placeholder="实践时数" name="practiceHour">
						</td>
					</tr>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
					<button type="button" class="btn btn-primary" id="save" onclick="sav()">保存</button>
				</div>
			</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div th:replace="~{commons/template::script}"></div>
</body>
<script>
	$("#insert").click(function (){
		$("#form")[0].reset(); /* 对【表单】的重置  所以选定的是 form表单的id */
		$("#cIdN").hide();
		$("#cId").hide();  //  hide之后 该值就为空了
		$("#myModal").modal('show');
	})
	function sav() {
		$.ajax({
			data:{courseId:$("#cId").val(),
				  courseName:$("#cName").val(),
				  score:$("#score").val(),
				  term:$("#term").val(),
				  courseType:$("#courseType").val(),
				  testType:$("#testType").val(),
				  courseHour:$("#courseHour").val(),
			      practiceHour:$("#practiceHour").val()},
			url:"insertOrUpdateCourse",
			type:"post",
			dataType:"json",
			success:function (result){
				alert(result.message)
				window.location.href="http://localhost:8080/selectCourse";
			}
		})
	}
	$("#t1").on("click","input[value='修改']",function() {
		$("#form")[0].reset();
		$.ajax({
			url:"selectCourseById",
			data:{courseId:this.name},
			type:"get",
			dataType:"json",
			async:false,
			success:function (course){
				$("#cId").val(course.courseId)
				$("#cName").val(course.courseName)
				$("#score").val(course.courseScore)
				$("#term").val(course.courseTerm)
				$("#courseType").val(course.courseType)
				$("#testType").val(course.courseTestType)
				$("#courseHour").val(course.courseHour)
				$("#practiceHour").val(course.coursePractice)
			}
		})
		$("#myModal").modal('show');
	})
	$("#t1").on("click","input[value='删除']",function (){
		let CID = this.name;
		if(confirm("确定删除该课程的所有信息？")){
			$.ajax({
				url:"deleteCourseInfo",
				data:{CID:CID},
				type:"get",
				dataType:"json",
				success:function (result){
					alert(result.message)
					window.location.href="http://localhost:8080/selectCourse";
				}
			})
		}
	})
</script>
</html>